<template>
  <div class="menu-warp">
    <div class="logo">
      <img src="~@/assets/logo.png" alt="logo" />
      <span class="title" v-if="!collapse">Vue3+TS后台管理</span>
    </div>
    <el-menu
      background-color="#0c2135"
      text-color="#b7bdc3"
      active-text-color="#0a60bd"
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      :collapse="collapse"
    >
      <el-sub-menu :index="item.route" v-for="item in menuList" :key="item.route">
        <template #title>
          <el-icon><component :is="item.iconClassName" /></el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          :index="subItem.route"
          v-for="subItem in item.subMenus"
          :key="subItem.route"
          @click="handleMenuItemClick(subItem)"
        >
          {{ subItem.title }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ROUTES } from '@/constant'
import router from '@/router'
import { getUserMenusByRoleId } from '@/service/login'
import { useUserStore } from '@/store/user'
import type { IMenuItem } from '@/types'
import { localCache } from '@/utils/cache'
import { mapMenusToRoutes } from '@/utils/map-menus'
import { computed, onMounted, ref } from 'vue'
const userStore = useUserStore()

defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})

const menuList = computed(() => userStore.menuList)

onMounted(() => {
  if (!menuList.value.length) {
    getMenuData()
  }
})

// 获取菜单信息
const getMenuData = async () => {
  const menuData = await getUserMenusByRoleId(1)
  if (menuData.menuList.length) {
    userStore.changeMenuList(menuData)
    localCache.setCache(ROUTES, menuData)
    const routes = mapMenusToRoutes(menuData)
    routes.forEach((route) => {
      router.addRoute('Main', route)
    })

    // 根据路劲匹配页面
    router.push({
      path: routes[0]?.path ?? '/not-found'
    })
    defaultActive.value = routes[0]?.path
  }
}

const defaultActive = ref('')
const handleMenuItemClick = (item: IMenuItem) => {
  router.push({
    path: item.route ?? '/not-found'
  })
}
</script>
<style scoped lang="less">
.menu-warp {
  height: 100%;
  background-color: #001529;

  .logo {
    display: flex;
    height: 28px;
    padding: 12px 10px 8px 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    img {
      height: 100%;
      margin: 0 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: white;
    }
  }

  .el-menu {
    border-right: none;
  }

  // 目录
  .el-submenu {
    background-color: #001529 !important;
    // 二级菜单 ( 默认背景 )
    .el-menu-item {
      padding-left: 50px !important;
      background-color: #0c2135 !important;
    }
  }

  ::v-deep .el-submenu__title {
    background-color: #001529 !important;
  }

  // hover 高亮
  .el-menu-item:hover {
    color: #fff !important; // 菜单
  }

  .el-menu-item.is-active {
    color: #fff !important;
    background-color: #0a60bd !important;
  }
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
  height: calc(100% - 48px);
}
</style>
